<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-22 09:19
 * Desc: 查看可用卡券
 */
-->
<template>
  <view class="check-film-coupon">
    <view v-if="type === '1'" class="check-film-coupon__tolook" @click="navTo">
      <text>{{ title }}</text>
      <u-icon name="arrow-right" color="#333" size="18"></u-icon>
    </view>
    <view v-else class="check-film-coupon__box">
      <view class="fc3 26 mb10">{{ text }}</view>
      <view @click="toBack" class="check-film-coupon__btn"> {{ des }}</view>
    </view>
  </view>
</template>
<script>
  export default {
    name: 'check-film-coupon',
    props: {
      url: {
        type: String,
        default: '/pages/mine/index'
      },
      type: {
        type: [Number, String]
        // default: '1'
      },
      arr: {
        type: Array,
        default: () => {
          return []
        }
      },
      title: {
        type: String,
        default: '查看可用券'
      },
      limitNum: {
        type: [Number, String],
        default: 1
      },
      activeTab: {
        type: String,
        default: '1'
      },
      filmPrice: {
        type: [String, Number],
        default: ''
      },
      singleSeatPrice: {
        type: [String, Number],
        default: ''
      }
    },
    watch: {},
    data() {
      return {
        type2: 0
      }
    },
    computed: {
      text() {
        if (+this.type !== 1) {
          if (+this.type === 2) {
            return +this.activeTab === 1
              ? `您选择${this.limitNum}个座位,还需选择${
                  this.limitNum -
                  (this.arr.length > 0 && +this.arr[0].type === 1
                    ? this.arr.length
                    : 0)
                }张券`
              : `还需支付${this.needMoney}元`
          } else {
            return '请选择需要核销的券,并与店员确认后,再确认核销'
          }
        } else {
          return this.title || ''
        }
      },
      des() {
        let text = ''
        switch (this.type) {
          case '2':
            text = '确认选择'
            break
          case '3':
            text = '确认核销'
            break
          default:
            text = ''
            break
        }
        return text
      },
      needMoney() {
        let money = +this.filmPrice
        if (this.arr.length > 0 && +this.arr[0].type === 2) {
          console.log(this.filmPrice, this.arr, this.singleSeatPrice)
          if (
            this.$utils.isNaNStr(this.arr[0].fullAmount) >
            this.$utils.isNaNStr(this.arr[0].showReduce)
          ) {
            money = +this.filmPrice - +this.arr[0].reduce
          } else {
            money = +this.filmPrice - +this.singleSeatPrice
          }
          console.log('money', money)
        } else {
          money = +this.filmPrice
        }
        return money.toFixed(2)
      }
    },
    methods: {
      navTo() {
        this.$tools.navigateTo(this.url)
      },
      toBack() {
        if (+this.type === 2) {
          this.$emit('select', this.arr)
        } else {
          this.handleSubmit()
        }
      },
      handleSubmit() {
        const code = this.arr
          .map((item) => {
            if (+item.isSel === 1) return item.code
          })
          .filter(Boolean)
          .join(',')
        this.$msg.loading()
        uni.$api.coupon
          .verification({ code })
          .then((res) => {
            this.$msg.hideLoading()
            const query = { id: res.detailId }
            this.$tools.navigateTo('/pagesOrder/verification/index', query)
          })
          .catch((err) => {
            console.log(err)
          })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .check-film-coupon {
    // box-sizing: border-box;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 47upx 0 50upx 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    // height: 197upx;
    background: #fff;
    border-radius: 30upx 30upx 0 0;
    &__tolook {
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 2upx;
      color: #333;
    }
    &__box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    &__btn {
      width: 710upx;
      height: 100upx;
      background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
      border-radius: 20upx;
      line-height: 100upx;
      text-align: center;
      color: #fff;
      font-size: 32rpx;
    }
  }
</style>
